/* 智能停车样式文件 */
/* 将common.less的文件引入首页 @import"文件名" */
@import "common";
* {
    touch-action: pan-y;
}
/* 页面元素rem 计算公式：元素  / html字体大小(50) */
@basefont:50;
/* 身体 */
.body_part {
    margin-top: (22.771rem / @basefont);
    width: 100%;
    overflow: hidden;
    /* background-color: pink; */
    /* 搜索栏 */
    .search_part {
        width: 100%;
        height: (135.837rem / @basefont);
        /* background-color: skyblue; */
        #search {
            border-radius: (87.838rem / @basefont / 2);
            box-shadow: 0 0 (10rem / @basefont) 0 rgb(0 0 0 / 10%);
            width: (720rem / @basefont);
            height: (87.838rem / @basefont);
            background-color: white;
            line-height: (87.838rem / @basefont);
            color: #999;
            font-size: 0.65rem;
            font-weight: 500;
            &::before {
                display: block;
                float: left;
                height: (88rem / @basefont);
                width: (96rem / @basefont);
                content: '';
                font-family: 'icomoon';
                font-size: 0.8rem;
                text-align: center;
            }
        }
    }
    /* 快捷键 */
    .four_part {
        margin-top: (12rem / @basefont);
        padding: (34.5rem / @basefont) (16rem / @basefont) (31rem / @basefont) (16rem / @basefont);
        display: flex;
        width: 100%;
        height: (266.5rem / @basefont);
        div[class^=four_part] {
            flex: 1;
            a {
                text-align: center;
                font-size: 0.55rem;
                span[class^=four_part_img] {
                    display: block;
                    margin-bottom: (18.4rem / @basefont);
                    height: (125rem / @basefont);
                    width: (125rem / @basefont);
                    border-radius: (125rem / @basefont / 2);
                    background-color: skyblue;;
                    background-size: cover;
                }
                .four_part_img_1 {
                    background: url('../image/car.webp') no-repeat;
                }
                .four_part_img_2 {
                    background: url('../image/car1.webp') no-repeat;
                }
                .four_part_img_3 {
                    background: url('../image/car2.webp') no-repeat;
                }
                .four_part_img_4 {
                    background: url('../image/car3.webp') no-repeat;
                }
            }
        }
    }
    /* 广告栏 */
    .banner {
        position: relative;
        height: (372rem / @basefont);
        width: 100%;
        background-color: skyblue;
        .swiper {
            position: relative;
            width: 100%;
            height: 100%;
          }
          /* 添加的 */
          .swiper-wrapper {
              display: flex;
              /* flex-flow: column;
              flex-wrap: nowrap; */
              height: 100%;
              width: 400%;
          }
          .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
    
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            height: 100%;
            width: 100%;
            flex: 1;
          }
    
          .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .banner_ad1 {
            background-size: cover;
            background-position: center bottom;
            background: url('../image/ad1.webp') 0% 0% /100% 100%  no-repeat;
        }
        .banner_ad2 {
            background-size: cover;
            background: url('../image/ad.webp') 0% 0% /100% 100% no-repeat;
        }
    }
    /* 附近停车场模块 */
    .nearby {
        margin-top: (23rem / @basefont);
        width: 100%;
        background-color: white;
        .nearby_body {
            padding: (36rem / @basefont) 0;
            width: 100%;
            height: (466rem / @basefont);
            .swiper {
                width: 100%;
                height: (394rem / @basefont);
              }

              .swiper-wrapper {
                  display: flex;
                  width: (946rem / @basefont);
                  height: 100%;
                  background-color: purple;
              }
              .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
        
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;

                /* background-color: skyblue; */
                padding-left: (24rem / @basefont);
                /* padding-bottom: (24rem / @basefont); */
                flex: 1;
                height: 100%;
                a[class^='nearby_body_imgbox'] {
                    height: 100%;
                    width: 100%;
                    border: (1rem / @basefont) solid #ddd;
                    box-shadow: outside 0 0 (5rem / @basefont) rgba(0, 0, 0, 0.041);
                    border-radius: .2rem;
                    background-color: white;
                }
                div[class^='nearby_body_img'] {
                    margin-bottom: (20rem / @basefont);
                    width: 100%;
                    height: 70%;
                    background:url('../image/nearby_body_img1.webp') no-repeat;
                    background-size: cover;
                }
                #nearby_body_img2 {
                    background:url('../image/nearby_body_img2.webp') no-repeat;
                }
                #nearby_body_img3 {
                    background:url('../image/nearby_body_img3.webp') no-repeat;
                }
                
                .nearby_body_imgspan {
                    font-size: 0.6rem;
                    color: #333;
                }
              }
        
              .swiper-slide img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
        }
    }
    /* 热门新闻 */
    .hot_news {
        background-color: white;
        margin-top: (23rem / @basefont);
        .hot_news_list {
            overflow: hidden;
            .swiper-container {
                width: 100%;
                height:100%;
            }
            .swiper-wrapper {
                height: 100%!important;
            }
            .swiper-slide {
                /* text-align: center; */
                font-size: 18px;
                background: #fff;
                height:(216rem / @basefont);
                /* line-height:100px; */
                /* Center slide text vertically */
                /* display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex; */
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;

                border-bottom: (0.1rem / @basefont) solid rgb(240, 240, 240);
                padding: 0 (36rem / @basefont);
                position: relative;

                .news_word {
                    padding: (36rem / @basefont) 0;
                    width: (470rem / @basefont);
                    /* background-color: skyblue; */
                    h5 {
                        margin-bottom: (16.8rem / @basefont);
                        font-size: 0.7rem;
                        font-weight: 400;
                        color: #333;
                    }
                    span {
                        margin-bottom: (16.8rem / @basefont);
                        display: block;
                        width: 100%;
                        /* 1. 强制一行显示完 */
                        white-space: nowrap;
                        /* 2. 溢出部分隐藏*/
                        overflow: hidden;
                        /* 3. 隐藏部分用省略号代替*/
                        text-overflow: ellipsis;
                        color: #848e98;
                        font-size: 0.512rem;
                    }
                    i {
                        color: #ababab;
                        font: 0.6rem;
                    }
                }
                div[class^='new_img'] {
                    position: absolute;
                    right: (36rem / @basefont);
                    top: (36rem / @basefont);
                    height: (144rem / @basefont);
                    width: (192rem / @basefont);
                    background:url('../image/new_img1.webp');
                    background-size: cover;
                    border-radius: (5rem / @basefont);
                }
                #new_img2 {
                    background:url('../image/new_img2.webp');
                }
                #new_img3 {
                    background:url('../image/new_img3.webp');
                }
            }

        }
    }
    /* 开始自驾游 */
    .star_trip {
        margin-top: (23rem / @basefont);
        width: 100%;
        background-color: white;
        .nearby_body {
            padding: (36rem / @basefont) 0;
            padding-bottom: (48rem / @basefont);
            width: 100%;
            height: (412rem / @basefont);
            .swiper {
                width: 100%;
                height: (376rem / @basefont);
              }

              .swiper-wrapper {
                  display: flex;
                  width: (895rem / @basefont);
                  height: ((100%) - (48rem / 376rem /@basefont));
                  /* background-color: purple; */
              }
              .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
        
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;

                /* background-color: skyblue; */
                padding-left: (24rem / @basefont);
                /* padding-bottom: (24rem / @basefont); */
                flex: 1;
                height: (326rem / @basefont);
                width: (264rem / @basefont)!important;
                a[class^='nearby_body_imgbox'] {
                    height: 100%;
                    width: 100%;
                    border: (1rem / @basefont) solid #ddd;
                    box-shadow: outside 0 0 (5rem / @basefont) rgba(0, 0, 0, 0.041);
                    border-radius: .2rem;
                    background-color: white;
                }
                div[class^='nearby_body_img'] {
                    margin-bottom: (30rem / @basefont);
                    width: 100%;
                    height: 70%;
                    background:url('../image/city.webp') no-repeat;
                    background-size: cover;
                }
                #nearby_body_img2 {
                    background:url('../image/city2.webp') no-repeat;
                    background-size: cover;
                }
                #nearby_body_img3 {
                    background:url('../image/city3.webp') no-repeat;
                    background-size: cover;
                }
                
                .nearby_body_imgspan {
                    font-size: 0.5rem;
                    color: #666;
                }
              }
        
              .swiper-slide img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
        }
    }
}